<template>
    <view style="width: 100%;" v-if="activity.activity && activity.activity.id">
        <view class="banner">
            <image class="banner-img" mode="aspectFill" :src="activity.activity.titleUrl"></image>
        </view>
        <view class="fh-padding-30">
            <text class="article-author">{{activity.activity.author||'' + ' '}}</text>
            <text class="article-text">创建于: </text>
            <text class="article-time">{{ ' ' + $utils.date.dateFomat(activity.activity.createAt)}}</text>
        </view>
        <view class="fh-padding-30">
            <view class="font-size-lg view-line-height">
                <text>{{activity.activity.title}}</text>
            </view>
            <view class="font-size-sm view-line-height">
                <text>活动开始时间：{{$utils.date.getDateWeek(activity.activity.startTime)}}</text>
            </view>
            <view class="font-size-sm view-line-height">
                <text>活动结束时间：{{$utils.date.getDateWeek(activity.activity.endTime)}}</text>
            </view>
            <view class="font-size-sm view-line-height">
                <text>活动人数：{{activity.activity.enrollRule.headcount}} 人</text>
            </view>
            <view class="font-size-sm view-line-height">
                <text>报名费用：{{activity.activity.enrollRule.malePrice == activity.activity.enrollRule.femalePrice
                    ? (activity.activity.enrollRule.malePrice/100 + ' 元'):('男:'+activity.activity.enrollRule.malePrice/100 + ' 元' +' 女:'+activity.activity.enrollRule.femalePrice/100 +' 元')}}</text>
            </view>
            <view class="font-size-sm view-line-height">
                <text>支付方式：{{activity.activity.enrollRule.isNeedPayOnline ? '线上支付':'线下支付' }}</text>
            </view>
            <view class="font-size-sm view-line-height">
                <text>活动地点：{{activity.activity.address}}</text>
            </view>

        </view>
        <view class="article-content activity-detail-content-img-width100 uni-center">
            <view v-html="activity.activityContent"></view>
        </view>
        <view class="fh-padding-30" style="width: 90%;">
            <button v-if="activity.isParticipate" type="info" >已报名</button>
            <button v-else type="primary" @click="goSignup">我要报名</button>
        </view>
        <view class="fh-padding-30" v-if="activity.participates && activity.participates.length >0" style="border-top: 1px solid #ccc;width: 90%;">
            <view class="font-size-sm view-line-height" style="color: red;" @tap="goParticipates('m')"><text>男已报名</text></view>
        </view>
        <view class="fh-padding-30">
            <view  v-if="item.userGenderDictName == '男'"  class="icon-item" v-for="(item,index) in activity.participates" :key="index" style="display: inline-block;width: 20%;">
                <image class="uni-grid-9-image" :src="item.userAvatar" style="border-radius: 50%;width: 50px;height: 50px;"></image>
            </view>
        </view>
        <view class="fh-padding-30" v-if="activity.participates && activity.participates.length >0 >0" style="border-top: 1px solid #ccc;width: 90%;">
            <view class="font-size-sm view-line-height" style="color: red;" @tap="goParticipates('f')"><text>女已报名</text></view>
        </view>
        <view class="fh-padding-30">
            <view  v-if="item.userGenderDictName == '女'"  class="icon-item" v-for="(item,index) in activity.participates" :key="index" style="display: inline-block;width: 20%;">
                <image class="uni-grid-9-image" :src="item.userAvatar" style="border-radius: 50%;width: 50px;height: 50px;"></image>
            </view>
        </view>

      <LoginPopup ref="loginPopup"></LoginPopup>

    </view>
</template>

<script>
import {mapState} from 'vuex'
import LoginPopup from "../../components/login/LoginPopup.vue";

    export default {
      components: {LoginPopup},
        data() {
            return {
                id: null,
                activity: {}
            }
        },
        computed:{
          ...mapState([
            // 用户是否已登录
            'hasLogin',
          ]),
        },
        onLoad(options) {
            this.id = options.id
            this.loadData()
        },
        onShow() {
        },
        methods: {
            goParticipates(genderDictValue){
                let participates = this.activity.participates || []
              console.log(participates)
                uni.navigateTo({
                    url: '/pages/activity/participates?genderDictValue='+ genderDictValue + "&title=" + this.activity.activity.title,
                    success(res) {
                        // 通过eventChannel向被打开页面传送数据
                        res.eventChannel.emit('participates', participates)
                    }
                })
            },
            loadData: function () {
                uni.showLoading({
                    title: '加载中'
                });
                this.$http.get('/app/activity/' + this.id).then(res => {
                    let content = res.data
                    this.activity = content
                }).finally(() => {
                    uni.hideLoading();
                })
            },
          // 跳转到报名信息收集页面
            goSignup() {
              // 如果未登录提示登录
              if (!this.hasLogin) {
                this.$refs.loginPopup.open()
                return
              }
              uni.navigateTo({
                  url: '/pages/activity/signup?activityId=' + this.id + '&isRequireIdCard=' + this.activity.activity.enrollRule.isRequireIdCard
              })
            }
        },
      watch: {
        hasLogin(val){
          // 登录成功后刷新数据
          if (val === true) {
            this.loadData()
          }
        }
      }
    }
</script>

<style>
    .banner {
        height: 360 upx;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }

    .banner-img {
        width: 100%;
    }

    .banner-title {
        max-height: 84 upx;
        overflow: hidden;
        position: absolute;
        left: 30 upx;
        bottom: 30 upx;
        width: 90%;
        font-size: 32 upx;
        font-weight: 400;
        line-height: 42 upx;
        color: white;
        z-index: 11;
    }

    .article-meta {
        padding: 20 upx 40 upx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        color: gray;
    }

    .article-text {
        font-size: 26 upx;
        line-height: 50 upx;
        margin: 0 20 upx;
    }

    .article-author,
    .article-time {
        font-size: 30 upx;
    }

    .article-content {
        padding: 0 30 upx;
        overflow: hidden;
        font-size: 30 upx;
        margin-bottom: 30 upx;
    }

    .uni-title {
        padding: 3px 0;
    }

    .uni-padding-wrap {
        border-top: 1px solid #ccc;
        padding: 6px 5px 0 13px;
        margin-bottom: 10px;
    }

</style>
